import { View, Text, Input, Button } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import { useState } from "react";
import "./index.scss";
import {
  Person,
  calculateRelationship,
  createSampleFamily,
  findRelationshipByDescription,
} from "../../utils/relationshipCalculator";

export default function Index() {
  const [inputText, setInputText] = useState("");
  const [result, setResult] = useState("");
  const [queryType, setQueryType] = useState<"direct" | "reverse" | "complex">(
    "direct"
  );
  const [region, setRegion] = useState("mandarin");

  useLoad(() => {
    console.log("Page loaded.");
  });

  const handleCalculate = () => {
    if (!inputText.trim()) {
      setResult("请输入关系或称呼");
      return;
    }

    if (queryType === "direct") {
      const relationship = calculateRelationship(inputText, region);
      setResult(relationship);
    } else if (queryType === "reverse") {
      const relationshipPath = reverseLookup(inputText, region);
      setResult(relationshipPath);
    } else {
      const relationship = parseComplexRelationship(inputText, region);
      setResult(relationship);
    }
  };

  const handleSwitchQueryType = () => {
    const types: Array<"direct" | "reverse" | "complex"> = [
      "direct",
      "reverse",
      "complex",
    ];
    const currentIndex = types.indexOf(queryType);
    const nextIndex = (currentIndex + 1) % types.length;
    setQueryType(types[nextIndex]);
    setInputText("");
    setResult("");
  };

  return (
    <View className="index">
      <View className="header">
        <Text className="title">亲戚称呼计算器</Text>
        <Text className="subtitle">快速查询亲戚关系与称呼</Text>
      </View>

      <View className="query-section">
        <View className="query-type-selector">
          <Button
            className={`query-btn ${queryType === "direct" ? "active" : ""}`}
            onClick={() => setQueryType("direct")}
          >
            基础查询
          </Button>
          <Button
            className={`query-btn ${queryType === "reverse" ? "active" : ""}`}
            onClick={() => setQueryType("reverse")}
          >
            反向查询
          </Button>
          <Button
            className={`query-btn ${queryType === "complex" ? "active" : ""}`}
            onClick={() => setQueryType("complex")}
          >
            复杂关系
          </Button>
        </View>

        <View className="region-selector">
          <Text className="region-label">选择方言：</Text>
          <View className="region-buttons">
            <Button
              className={`region-btn ${region === "mandarin" ? "active" : ""}`}
              onClick={() => setRegion("mandarin")}
            >
              普通话
            </Button>
            <Button
              className={`region-btn ${region === "cantonese" ? "active" : ""}`}
              onClick={() => setRegion("cantonese")}
            >
              粤语
            </Button>
            <Button
              className={`region-btn ${
                region === "shanghainese" ? "active" : ""
              }`}
              onClick={() => setRegion("shanghainese")}
            >
              上海话
            </Button>
            <Button
              className={`region-btn ${region === "sichuan" ? "active" : ""}`}
              onClick={() => setRegion("sichuan")}
            >
              四川话
            </Button>
          </View>
        </View>

        <View className="input-section">
          <Text className="input-label">
            {queryType === "direct"
              ? "请输入基础关系（如：爸爸的姐姐）"
              : queryType === "reverse"
              ? "请输入称呼（如：姑妈）"
              : "请输入复杂关系（如：我妻子的哥哥的岳母）"}
          </Text>
          <Input
            className="input-field"
            value={inputText}
            onInput={(e) => setInputText(e.detail.value)}
            placeholder={
              queryType === "direct"
                ? "例如：爸爸的姐姐"
                : queryType === "reverse"
                ? "例如：姑妈"
                : "例如：我妻子的哥哥的岳母"
            }
          />
        </View>

        <Button className="calculate-btn" onClick={handleCalculate}>
          计算称呼
        </Button>

        {result && (
          <View className="result-section">
            <Text className="result-label">结果：</Text>
            <Text className="result-text">{result}</Text>
          </View>
        )}
      </View>

      <View className="examples-section">
        <Text className="examples-title">使用示例：</Text>
        {queryType === "direct" && (
          <>
            <Text className="example">
              • 爸爸的姐姐 →{" "}
              {region === "mandarin"
                ? "姑妈"
                : region === "cantonese"
                ? "姨妈"
                : region === "shanghainese"
                ? "姨妈"
                : "姨妈"}
            </Text>
            <Text className="example">
              • 妈妈的妹妹 →{" "}
              {region === "mandarin"
                ? "姨妈"
                : region === "cantonese"
                ? "姨妈"
                : region === "shanghainese"
                ? "姨妈"
                : "姨妈"}
            </Text>
            <Text className="example">
              • 我儿子的女儿 →{" "}
              {region === "mandarin"
                ? "孙女"
                : region === "cantonese"
                ? "孙女"
                : region === "shanghainese"
                ? "孙女"
                : "孙女"}
            </Text>
          </>
        )}
        {queryType === "reverse" && (
          <>
            <Text className="example">• 姑妈 → 爸爸的姐姐</Text>
            <Text className="example">• 姨妈 → 妈妈的姐姐或妈妈的妹妹</Text>
            <Text className="example">• 伯父 → 爸爸的哥哥</Text>
          </>
        )}
        {queryType === "complex" && (
          <>
            <Text className="example">
              • 我妻子的哥哥的岳母 → 无法解析的复杂关系
            </Text>
            <Text className="example">• 我堂弟的孙子 → 无法解析的复杂关系</Text>
            <Text className="example">
              • 丈夫的哥哥 →{" "}
              {region === "mandarin"
                ? "大伯"
                : region === "cantonese"
                ? "大伯"
                : region === "shanghainese"
                ? "大伯"
                : "大伯"}
            </Text>
            <Text className="example">
              • 妻子的妈妈 →{" "}
              {region === "mandarin"
                ? "岳母"
                : region === "cantonese"
                ? "岳母"
                : region === "shanghainese"
                ? "岳母"
                : "岳母"}
            </Text>
          </>
        )}
      </View>
    </View>
  );
}
